<template>
  <el-col
    :span="sidebarCollapsed ? 24 : 18"
    :style="{
      'margin-left': sidebarCollapsed ? '0' : '25%',
      transition: 'margin-left 0.15s ease 0s'
    }"
  >
    <div class="banner flex justify-between items-center px-10">
      <span class="group-name text-secondary">
        {{ $t('menu.M_10400008') }} <br />
        <h1 style="font-size: 1.5em; font-weight: 700; color: #ffffff">
          {{ $route.query.name }}
        </h1>
      </span>
      <div
        v-permission="{
          permission: '10400008.MANAGE',
          condition: {}
        }"
      >
        <!-- TODO: 加到组件库当中 -->
        <el-button text class="dark" style="width: 40px; height: 40px" @click="handleDelete">
          <svg-icon icon-class="Delete" :style="{ fontSize: '24px', color: 'white' }" />
        </el-button>
        <!-- TODO: 加到组件库当中 -->
        <el-button text class="dark" style="width: 40px; height: 40px" @click="handEdit()">
          <svg-icon icon-class="edit" :style="{ fontSize: '24px', color: 'white' }" />
        </el-button>
      </div>
      <el-dialog
        v-model="editBatchVisible"
        :title="$t('batch.edit_title')"
        width="450px"
        append-to-body
        @close="closeDialog('editform')"
      >
        <el-form
          @submit.prevent.native
          ref="editform"
          :model="form"
          :rules="rules"
          label-position="top"
        >
          <el-form-item :label="$t('batch.batch_name') + ':'" prop="name">
            <el-input
              v-model="form.name"
              maxlength="32"
              show-word-limit
              :placeholder="$t('common.msg_enterPlease')"
              autocomplete="off"
              @blur="() => (form.name = form.name.trim())"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button text @click="cancelEdit('editform')">{{ $t('page.cancel') }}</el-button>
            <el-button type="primary" :loading="loading" @click="edit('editform')"
              >{{ $t('page.confirm') }}
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <div class="p-5">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="$t('batch.task')" name="task">
          <task-list-tab :child-data="{ batchId: batchId, deviceCount: deviceCount }" />
        </el-tab-pane>
        <el-tab-pane :label="$t('batch.terminal')" name="terminal">
          <terminal-list-tab :child-data="{ batchId: batchId }" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-col>
</template>

<script>
import { delBatch, updateBatch } from '@/api/batch'
import TaskListTab from './tabs/task-list-tab'
import TerminalListTab from './tabs/terminal-list-tab'
import common from '@/utils/common'

export default {
  components: {
    TerminalListTab,
    TaskListTab
  },
  props: {
    sidebarCollapsed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    var validateInput = (rule, value, callback) => {
      if (!common.checkSpecificKey(value)) {
        callback(new Error(this.$t('common.page_tip_specialSymbol')))
      } else {
        callback()
      }
    }
    return {
      batchId: this.$route.params.id,
      activeName: 'task',
      deviceCount: this.$route.query.deviceCount,
      editBatchVisible: false,
      loading: false,
      batchName: this.$route.query.name,
      form: { name: '' },
      rules: {
        name: [
          {
            required: true,
            message: this.$t('common.rule_input'),
            trigger: 'blur'
          },
          { validator: validateInput, trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  mounted() {
    this.activeName = this.$route.query.activeName
    this.deviceCount = this.$route.query.deviceCount
    this.batchName = this.$route.query.name
  },
  methods: {
    handEdit() {
      this.form.name = this.batchName
      this.editBatchVisible = true
    },
    handleDelete() {
      this.$commonConfirm().showDeleteDialog(
        this.$t('common.common_confirm.delete_title'),
        this.deviceCount === 0 ? this.$t('common.delete_confirm') : this.$t('batch.tip_has_device'),
        this.$t('common.delete'),
        (instance, done) => {
          instance.loading = true
          delBatch({ batchId: this.batchId })
            .then((res) => {
              this.$message.success(this.$t('page.delete_success'))
              this.$bus.emit('freshTerminalCount')
              this.$router.push({ path: `/tms/group/index` })
              this.$commonConfirm().close()
            })
            .catch(this.$confirmError)
            .finally(() => {
              instance.loading = false
            })
        }
      )
    },
    edit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          updateBatch(this.batchId, this.form)
            .then((res) => {
              this.loading = false
              this.editBatchVisible = false
              this.$message.success(this.$t('common.msg_succeed'))
              var batch = { batchId: res.batchId, name: res.name }
              this.$bus.emit('freshBatch', batch)
              this.$bus.emit('freshTerminalCount')
              this.batchName = this.form.name
            })
            .catch((e) => {
              this.loading = false
              this.$message.error(e.message)
            })
        } else {
          console.log('error edit!!')
          return false
        }
      })
    },
    cancelEdit(formName) {
      this.$nextTick(() => {
        this.editBatchVisible = false
      })
    },
    closeDialog(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
</style>
